<!-- 系统更新 -->
<template>
    <div class="system-update">
        <div class="ls-card">
            <el-alert class="xxl" type="info" :closable="false" show-icon>
                <template slot='title'>
                    <div class="iconSize">温馨提示：</div>
                    <div class="iconSize flex">1.版本更新需要逐个版本更新，<div class="a-key">更新前请备份好系统和数据库，更新成功后需要强制刷新站点；</div>
                    </div>
                    <div class="iconSize">2.系统没有做二次开发，可以直接选择在线更新功能；</div>
                    <div class="iconSize">3.系统已做二次开发，进行了功能修改，请谨慎选择在线更新功能，推荐以更新包的形式手动更新；</div>
                    <div class="iconSize">4.系统至1.4.0版本开始，OSS文件存储迁移到平台端，如果之前已经配置过，升级后需要去平台后台重新配置；</div>
                </template>
            </el-alert>
        </div>
        <div class="ls-card m-t-16">
            <el-table :data="pager.lists" style="width: 100%" size="mini" v-loading="false"
                :header-cell-style="{'background':'#f5f8ff'}">
                <el-table-column prop="publish_time" label="发布日期">
                </el-table-column>
                <el-table-column label="版本号">
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-tag v-if="scope.$index == 0" size="small" type="success" effect="plain" round>
                                new</el-tag>
                            <div class="m-l-5">{{scope.row.version_no}}</div>
                        </div>
                        <div>
                            {{ scope.row.version_str }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="版本内容">
                    <template slot-scope="scope">
                        <div :key="index" v-for="(item,index) in scope.row.add">
                            {{ item }}
                        </div>
                        <div :key="index" v-for="(item,index) in scope.row.optimize">
                            {{ item }}
                        </div>
                        <div :key="index" v-for="(item,index) in scope.row.repair">
                            {{ item }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="notice" label="注意事项">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.notice" :key="index">
                            {{ item }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="200px">
                    <template slot-scope="scope">
                        <div class="operation flex flex-wrap">
                            <el-button v-if="scope.row.able_update == 1" class="m-r-10" type="primary" size="small"
                                slot="trigger" @click="onOuterVisible(scope.row.id)">一键更新
                            </el-button>
                            <el-button v-if="scope.row.integral_package_link" class="m-r-10" type="" size="small"
                                slot="trigger" @click="toPackage(scope.row.id, 6)">下载完整安装包
                            </el-button>
                            <el-button v-if="scope.row.package_link" class="m-r-10" type="" size="small" slot="trigger"
                                @click="toPackage(scope.row.id, 2)">下载服务端更新包</el-button>
                            <el-button v-if="scope.row.pc_package_link" class="m-r-10" type="" size="small"
                                slot="trigger" @click="toPackage(scope.row.id, 3)">下载pc端更新包</el-button>
                            <el-button v-if="scope.row.uniapp_package_link" class="m-r-10" type="" size="small"
                                slot="trigger" @click="toPackage(scope.row.id, 4)">下载uniapp更新包</el-button>
                            <el-button v-if="scope.row.web_package_link" type="" size="small" slot="trigger"
                                @click="toPackage(scope.row.id, 5)">
                                下载后台前端更新包</el-button>
                          <el-button v-if="scope.row.web_package_link" type="" size="small" slot="trigger"
                                     @click="toPackage(scope.row.id, 9)">
                            下载平台前端更新包</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 一键更新弹出框 -->
        <el-dialog class="dialog" title="" :visible.sync="outerVisible" width="30%" top="40vh" center>
            <el-dialog class="dialogTwo" width="30%" top="40vh" :visible.sync="innerVisible" append-to-body center>
                <el-dialog class="dialogThree" width="30%" top="40vh" :visible.sync="threeVisible" append-to-body center
                    :close-on-click-modal="false" :close-on-press-escape="false">
                    <div style="height: 200px;text-align: center;" v-loading="loading"
                        element-loading-text="切勿关闭窗口或刷新页面">
                        <div>系统更新中，更新完毕后会自行刷新页面</div>
                        <!-- <div>切勿关闭窗口或刷新页面</div> -->
                    </div>
                </el-dialog>
                <div v-if="isSecondaryDev == false" style="height: 200px;">
                    <div style="text-align: center;">
                        一键更新导致的系统问题，欢迎前往社区反馈，请做好系统备份！
                    </div>
                    <div class="btn-div flex-col " style="width: 160px; margin: auto;">
                        <el-button type="primary" @click="confirmUpdate" size="small"
                            style="margin-top: 15px; margin-left: 0;">确定更新</el-button>
                        <el-button @click="innerVisible = false" size="small" style="margin-top: 15px; margin-left: 0;">
                            取消更新</el-button>
                    </div>
                </div>
                <div v-if="isSecondaryDev == true" style="height: 200px;">
                    <div style="text-align: center;">
                        <div>二次开发后请谨慎使用一键更新功能！</div>
                        <div>二次开发后一键更新导致的系统问题，官方无法处理，请做好系统备份！</div>
                    </div>
                    <div class="btn-div flex-col" style="width: 160px; margin: auto;">
                        <el-button type="primary" @click="confirmUpdate" size="small"
                            style="margin-top: 15px; margin-left: 0;">确定更新</el-button>
                        <el-button @click="innerVisible = false" size="small" style="margin-top: 15px; margin-left: 0;">
                            下载更新包，手动更新</el-button>
                        <el-button @click="innerVisible = false" size="small" style="margin-top: 15px; margin-left: 0;">
                            取消更新</el-button>
                    </div>
                </div>
            </el-dialog>
            <div style="height: 200px;">
                <div style="text-align: center;">
                    系统是否进行二次开发
                </div>
                <div class="flex-col">
                    <el-button type="primary" @click="NotSecondaryDev" size="small">未做二次开发，直接更新</el-button>
                    <el-button @click="SecondaryDev" size="small">已做二次开发</el-button>
                    <el-button @click="outerVisible = false" size="small">取消更新</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
  apiSystemUpgradeLists,
  apiSystemUpgradeDownloadPkg,
  apiSystemUpgrade
} from '@/api/setting'
import { RequestPaging } from '@/utils/util'
import LsPagination from '@/components/ls-pagination.vue'
@Component({
  components: {
    LsPagination
  }
})
export default class SystemUpdate extends Vue {
  /** S Data **/

    // 外层dialog
    outerVisible = false;
    // 第二层dialog
    innerVisible = false;
    // 第三层dialog
    threeVisible = false;
    // 是否二次开发
    isSecondaryDev = true;

    // 加载动画
    loading = true;

    pager: RequestPaging = new RequestPaging();

    // 点击一键更新按钮的版本id
    id = 0;

    timer = 0;
    /** E Data **/

    /** S Methods **/

    // 系统更新列表
    getSystemUpgradeLists () {
      // 分页请求
      this.pager.request({
        callback: apiSystemUpgradeLists
      })
    }

    // 非完整安装包下载
    toPackage (id: number, type: number) {
      if (this.timer) {
        clearTimeout(this.timer)
      }

      this.timer = setTimeout((): void => {
        apiSystemUpgradeDownloadPkg({
          id: id,
          update_type: type // 2:服务端更新包下载，3:pc端更新包下载，4: uni app更新包下载,5:后台前端更新包下载, 6:完整包更新， 9:平台端更新
        }).then((res) => {
          if (type == 6) {
            window.open(res.line, '_blank')
          } else {
            window.location.href = res.line
          }
        })
      }, 500)
    }

    // 一键更新请求
    async systemUpgrade (): Promise<void> {
      await apiSystemUpgrade({
        id: this.id,
        update_type: 1 // 1:一键更新
      }).finally(() => {
        this.threeVisible = false
        this.innerVisible = false
        this.outerVisible = false
      })
      this.getSystemUpgradeLists()
    }

    // 点击一键更新按钮
    onOuterVisible (id: number) {
      this.outerVisible = true
      this.id = id
    }

    // 未做二次开发
    NotSecondaryDev () {
      this.isSecondaryDev = false
      this.innerVisible = true
    }

    // 已做二次开发
    SecondaryDev () {
      this.isSecondaryDev = true
      this.innerVisible = true
    }

    // 点击确定更新
    confirmUpdate () {
      this.threeVisible = true
      this.systemUpgrade()
    }

    /** E Methods **/

    /** S Life Cycle **/
    created () {
      this.getSystemUpgradeLists()
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.system-update {
    .dialog {
        /deep/ .el-button {
            margin: auto;
            width: 160px;
            margin-top: 15px;
        }

        .dialogTwo {
            .btn-div {
                /deep/ .el-button {
                    margin: auto;
                    width: 160px;
                    margin-top: 15px;
                }
            }
        }
    }

    .iconSize {
        padding: 3px 0;

        .a-key {
            color: #f56c6c;
        }
    }

    .operation {
        /deep/ .el-button {
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>
